<template>
  <div>
    <head-top></head-top>
    <div class="login-content">
      <div class="login-div">
        <div class="login-div-text-center subheading-heavy">{{ loginTitle }}</div>
        <div class="login-div-item">
          <div class="login-div-item-img div-align-justify-center">
            <img class="icon-24" src="@/static/icon/sms.png" alt=""/>
          </div>
          <input v-model="login.username" class="login-div-item-input" type="text" placeholder="请输入邮箱"/>
          <div class="login-div-item-img-eye"></div>
        </div>
        <div class="login-div-item">
          <div class="login-div-item-img div-align-justify-center">
            <img class="icon-24" src="@/static/icon/lock.png" alt=""/>
          </div>
          <input v-model="login.password" class="login-div-item-input" :type="ifShowPwd ? 'text' : 'password'"
                 placeholder="请输入密码"/>
          <div class="login-div-item-img-eye">
            <img v-if="!ifShowPwd" class="icon-20" src="@/static/icon/20px_eye_closed.png" @click="ifShowPwd = !ifShowPwd" alt=""/>
            <img v-if="ifShowPwd" class="icon-20" src="@/static/icon/20px_eye_open.png" @click="ifShowPwd = !ifShowPwd" alt=""/>
          </div>
        </div>
        <div class="login-div-item-input-tip" v-if="ifShowTip">
          <img class="icon-16" src="@/static/icon/warn.png" alt=""/>
          <span class="color-red">{{ tipText }}</span>
        </div>
        <div class="button-all body-heavy div-align-justify-center"
             :class="login.username && login.password ? 'button-all-active' : '' "
             @click="confirmLogin"
        >登录
        </div>
        <div class="paragraph-p3-light color-grey login-div-text-center"
             @click="forgetPassword"
        >{{ loginRemark }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadTop from '@/components/HeadTop'
import {userLogIn} from "@/request/api";
import {Toast} from "vant";

export default {
  components: {
    HeadTop,
  },
  name: "LoginViewLogin",
  data() {
    return {
      ifShowPwd: false,
      loginId: this.$route.params.loginType,
      loginTitle: '管理员登录',
      loginRemark: '忘记密码?',
      ifShowLogin: true,
      ifShowTip: false,
      login: {
        username: '',
        password: '',
      },
      tipText: '',
    };
  },
  mounted() {
    if (Number(this.loginId) === this.GLOBAL.roleType.admin) {
      this.loginTitle = '管理员登录'
      this.loginRemark = '忘记密码?'
    }
    if (Number(this.loginId) === this.GLOBAL.roleType.sales) {
      this.loginTitle = '销售登录'
      this.loginRemark = '如忘记密码，请与管理员联系。'
    }
  },
  methods: {
    forgetPassword() {
      if (Number(this.loginId) === this.GLOBAL.roleType.admin) {
        if (this.login.username) {
          this.$router.push({path: this.GLOBAL.pathSetting.login.forgetPwd, query: {email: this.login.username}} )
        } else {
          this.ifShowTip = true
          this.tipText = '请输入邮箱'
        }
      }
    },
    confirmLogin() {
      if (this.login.username && this.login.password) {
        if (!this.$baseJS.checkEmail(this.login.username)) {
          Toast('请输入正确邮箱')
        } else {
          this.$loading.show()
          userLogIn({email: this.login.username, password: this.login.password}).then(res => {
            const {State, Data, Msg} = res
            if (State) {
              this.$baseJS.setLoginUser(Data)
              this.$router.push(this.GLOBAL.pathSetting.todo.main)
            } else {
              this.ifShowTip = true
              this.tipText = Msg
              // this.tipText = '密码不正确，请重新输入。'
            }
            this.$loading.close()
          }).catch(() => { this.$loading.close() })
        }
      }
    },
  },
};
</script>
<style scoped>
.login-content {
  margin-top: -1px;
  height: 725px;
  background: #FCD538;
  padding: 32px 24px 0 24px;
}

.login-div {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 16px 16px 16px;
}

.login-div-item {
  height: 44px;
  margin-top: 24px;
  background: #FAFAFA;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-div-item-img {
  height: 44px;
  width: 15vh;
  background: #FFF5CC;
  border-radius: 8px 0 0 8px;
}

.login-div-item-img-eye {
  width: 10vh;
}

.login-div-item-input {
  height: 44px;
  width: 75vh;
  border: none;
  background: #FAFAFA;
  border-radius: 0 8px 8px 0;
}

.login-div-item-input-tip {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-div-item-input-tip > span {
  width: 160px;
  height: 18px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-div-text-center {
  text-align: center;
}
input {
  padding-left: 8px;
}
input::-webkit-input-placeholder {
  padding-left: 8px;
}
</style>